<template>
	<view class="jg-index">
		<view class="content" style="position: relative;">
			<view style="position: absolute;right: 25px;top: 20px;color: #fff;" @click="getRouter">退出登录</view>
			<view class="an_crown">
				<u-icon label="" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
			</view>
			<view class="an_crown">
				<image src="https://img01.yzcdn.cn/vant/cat.jpeg" style="width: 120upx;height: 120upx;"></image>
			</view>
			<view class="an_crown">{{ userInfo.realname }}</view>
		</view>
		<view class="nav-contain">
			<view>
				<u-row gutter="16" justify="space-between">
					<u-col span="3">
						<view class="demo-layout bg-purple">机构ID</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout bg-purple-light">{{ userInfo.realname }}</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="3">
						<view class="demo-layout bg-purple">机构账号</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout bg-purple-light">JG0001</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="3">
						<view class="demo-layout bg-purple">合作商务</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout bg-purple-light">商大雾</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="3">
						<view class="demo-layout bg-purple">合约类型</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout bg-purple-light">CPA</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="3">
						<view class="demo-layout bg-purple">目标单量</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layout bg-purple-light">2000单</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 编辑时显示 -->
		<view class="tx-contain">
			<u-row gutter="16" justify="space-between" class="tx-contain-jbzl">
				<u-col span="9">
					<view class="demo-layout bg-purple">基本资料</view>
				</u-col>
				<u-col span="3">
					<!-- <view class="demo-layout bg-purple-light">编辑<u-icon name="edit-pen" color="#0383F2" style="margin-left: 5px;"></u-icon></view> -->
					<view class="demo-layout bg-purple-light" @click="submit">确认修改</view>
				</u-col>
			</u-row>
			<u-form :model="form" ref="uForm">
				<u-form-item label="机构名称" prop="name"><u-input v-model="form.name" /></u-form-item>
				<u-form-item label="负责人" prop="intro"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="联系方式" prop="sex"><u-input v-model="form.sex" /></u-form-item>
				<u-form-item label="机构LOGO">
					<u-upload :action="action" :file-list="fileList" max-count="1" width="160" height="160"></u-upload>
					<view style="width: 100%;">图片尺寸建议350*350</view>
				</u-form-item>
				<u-form-item label="机构介绍" prop="jgjs"><u-input v-model="form.jgjs" :type="type" :border="border" :height="height" :auto-height="autoHeight" /></u-form-item>
			</u-form>
		</view>
		<bottom/>
	</view>
</template>
	
<script>
	import bottom from '../../components/bottom/index.vue'
	export default {
		components:{ bottom },
		data() {
			return {
				userInfo: {},
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				action: '',
				fileList: [
					// {
					// 	url: '',
					// }
				],
				form: {
					name: '',
					intro: '',
					sex: '',
					jgjs: ''
				},
				rules: {
					name:[
						{
							required: true,
							message: '请输入机构名称',
							trigger: ['change','blur']
						}
					],
					intro:[
						{
							required: true,
							message: '请输入负责人',
							trigger: ['change','blur']
						},
					],
					sex: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					jgjs: [
						{
							required: true, 
							message: '请输入机构介绍', 
							trigger: ['change','blur'],
						}
					]
				},
			};
		},
		onLoad () {
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(this.userInfo)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			getRouter(){
				uni.navigateTo({
					url: '/pages/clues/index'
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style scoped>
	.tx-contain /deep/ .u-list-item{
		background: #F7FBFE;
	}
	/deep/ .u-form-item--right__content__slot{
		flex-flow: row wrap;
		color: #c0c4cc;
	}
	/deep/ .u-form-item:nth-last-child(1):after{
		border: 0px solid #fff;
	}
	/deep/ .u-form-item__message{
		padding-left: 85px !important;
	}
	/deep/ .u-form-item--left{
		flex: 0 0 85px !important;
	}
</style>
<style lang="less" scoped>
	.font-36{
		font-size: 36upx;
		font-weight: bold;
	}
	.font-32{
		font-size: 36upx;
		font-weight: bold;
	}
	.font-30{
		color: #0087F2;
		font-size: 30upx;
		margin-left: 39upx;
		margin-top: 5upx;
	}
	.font-24{
		font-size: 24upx;
	}
	.font-28{
		font-size: 28upx;
		font-weight: bold;
	}
	.font-20{
		font-size: 20upx;
	}
	.jg-index{
		width: 100%;
		padding-bottom: 7vh;
		overflow: hidden;
	}
	.vertical-offset{
		width: 1px;
		border: 1px solid #F7FCFF;
		margin-left: 270upx;
		margin-right: 44upx;
	}
	.content {
		padding: 100upx 0;
		height: 460upx;
		width: 100%;
		overflow: scroll;
		background-image: url(../../static/back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.site-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 45upx;
			.site-header-left{
				color: #FFFFFF;
				.site-header-font{
					font-size: 24upx;
				}
			}
		}
		.subtransactions-header{
			width: 100%;
			display: flex;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 130upx;
			color: #FFFFFF;
		}
	}
	.tx-contain{
		width: 100%;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		padding: 0 35upx;
	}
	.nav-contain{
		width: 100%;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		bottom: 15upx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 50upx;
		padding-bottom: 50upx;
		border-bottom: 5px solid #F4F9FE;
		.u-row{
			margin-bottom: 20px;
		}
		.u-row:nth-last-child(1){
			margin-bottom: 0px;
		}
		.nav-contain-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.nav-contain-header-left{
				display: flex;
			}
			.nav-contain-header-right{
				margin-top: 5upx;
			}
		}
		.nav-fl{
			width: 100%;
			overflow-y: scroll;
			display: flex;
			margin-bottom: 18upx;
			.nav-fl-div{
				width: 129upx;
				height: 49upx;
				font-size: 22upx;
				background-color: #F7FCFF;
				line-height: 47upx;
				text-align: center;
				border-radius: 8upx;
				margin-top: 38upx;
				color: rgba(102, 102, 102, 0.8);
				margin-left: 11upx;
			}
			.nav-fl-div-ch{
				width: 129upx;
				height: 48upx;
				font-size: 22upx;
				background-color: #FFFFFF;
				line-height: 45upx;
				text-align: center;
				border-radius: 8upx;
				margin-top: 38upx;
				color: #87B847;
				border: 1upx solid #87B847;
				margin-left: 11upx;
			}
		}
		.nav-bootom{
			height: 100%;
			padding-bottom: 70px;
			overflow-x: scroll;
			.nav-contain-bottom{
				width: 690upx;
				background: #F7FCFF;
				border-radius: 10px;
				margin-top: 26upx;
				padding: 24upx;
				border: 1upx solid #87B847;
				margin-bottom: 20upx;
				.top{
					display: flex;
					justify-content: space-between;
				}
				.nav{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 27upx;
				}
				.bootom{
					display: flex;
					margin-top: 42upx;
					align-items: center;
					.bottom-address{
						width: 193upx;
						height: 43upx;
						border: 1upx solid #AAAAAA;
						border-radius: 6upx;
						text-align: center;
						line-height: 40upx;
					}
					.bottom-ff{
						width: 110upx;
						height: 40upx;
						background: rgba(0, 129, 243, 0.1);
						border-radius: 10upx;
						color: #0081F1;
						text-align: center;
						line-height: 40upx;
						margin-left: 23upx;
					}
				}
			}
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.an_crown{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bg-purple{
		color: #666;
	}
	.an_crown:nth-child(3){
		margin-top: 10upx;
		margin-bottom: 35upx;
	}
	.an_crown:nth-last-child(1){
		color: #fff;
		font-size: 36rpx;
	}
	.tx-contain-jbzl{
		margin-top: 25upx;
		margin-bottom: 15upx;
		.u-col-9,.u-col-3{
			padding: 0px !important;
		}
		.bg-purple{
			font-weight: bolder;
			color: #000;
		}
	}
	.tx-contain-jbzl .u-col-3{
		color: #0383F2;
		text-align: right !important;
	}
</style>
